﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉框-select</title>
		<link rel="shortcut icon" href="/public/image/favicon.png">
		<link rel="stylesheet" type="text/css" href="/public/style/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="/public/style/common.css">
		<style type="text/css">	
			.select{
				width:180px;
				margin-bottom:25px;
				text-indent:1em;
			}
			.select .box{
				position:relative;
				height:28px;
				border:1px solid #e2e2e2;
				line-height:28px;
			}
			.select .box:after{
				position:absolute;
				top:50%;
				right:12px;
				display:block;
				margin-top:-2px;
				content:"";
				width:0;
				border:4px solid transparent;
				border-top:4px solid #000;
			}
			.select .list{
				background:#fff;
				border:1px solid #e2e2e2;
			}
			.select .list li{
				height:28px;
				line-height:28px;
			}
			.select .list li.active{
				background:#999;
			}
		</style>
		<script type="text/javascript" src="/public/script/jquery.min.js"></script>
		<script type="text/javascript" src="/code/jquery.select.js"></script>
	</head>
	<body>
		<div class="header">
            <a href="https://github.com/mumuy/widget" target="_blank">项目地址</a>
            <a href="/">返回首页</a>
        </div>
		<div class="main">
			<select class="select1">
				<option value="op1">选项一</option>
				<option value="op2" selected>选项二</option>
				<option value="op3">选项三</option>
			</select>
			<div class="code">
				<p>$(".select1").select();</p>
			</div>
			<script type="text/javascript">
				$(".select1").select();
			</script>
			<div class="example">
				<div class="call">
					<h1>调用方法：</h1>
					<p>$(selector).select(options,callback(api));</p>
				</div>
				<h2>options参数</h2>
				<table>
					<thead>
						<tr>
							<th width="150">参数</th>
							<th width="120">默认值</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>selectCls</td>
							<td>'select'</td>
							<td>选择框外层class</td>
						</tr>
						<tr>
							<td>boxCls</td>
							<td>'box'</td>
							<td>选择框class</td>
						</tr>
						<tr>
							<td>innerCls</td>
							<td>'inner'</td>
							<td>下拉菜单外层class</td>
						</tr>
						<tr>
							<td>listCls</td>
							<td>'list'</td>
							<td>下拉菜单class</td>
						</tr>
						<tr>
							<td>activeCls</td>
							<td>'active'</td>
							<td>下拉菜单选中class</td>
						</tr>
						<tr>
							<td>html(status)</td>
							<td>
								function(status){
									status.list.append("&lt;li&gt;"+status.item.text()+"&lt;/li&gt;");
								}
							</td>
							<td>下拉菜单自定义结构</td>
						</tr>
						<tr>
							<td>onSelect(value)</td>
							<td>[无]</td>
							<td>选择事件处理</td>
						</tr>
					</tbody>
				</table>
				<h2>callback(api)参数</h2>
				<table>
					<thead>
						<tr>
							<th width="200">方法</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>setValue()</td>
							<td>修改当前值</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div style="display: none;">
			<script src="http://s11.cnzz.com/z_stat.php?id=1260218562&web_id=1260218562"></script>
		</div>
	</body>
<html>
